<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>百度前端学院html任务五</title>
	<style type="text/css">
	body{margin:0;padding:0;}
	a{text-decoration-line:none;color:white;}
	a:hover{color: yellow;}
	a:active{color:blue;}
	header{width: 100%;height:100px;background-color: black;color:white;}
	header .icon{width:150px;height:50px;float:left;background: blue;margin-top: 10px;margin-left: 30px;padding-top:30px;text-align: center; }
	header ul{width:400px;height:30px;margin-top: 40px;margin-right: 20px;float:right;}
	header ul li{width:100px;height:25px;display: block;float: left;text-align: center;}
	.mian{width:95%;min-height:100%;margin:5px auto;overflow: auto;}
	.mian .left{width:60%;display: block;float:left;padding: 0;margin:0;}
	.mian .left .box{width:80%;border:1px solid #dcdcdc;box-shadow:2px 2px 10px #dcdcdc;margin:20px auto;overflow: auto;}
	.mian .left .box .img{width:175px;height:225px;float:left;}
	.mian .right{width:400px;height:600px;position: relative;display:block;float:right;border:1px solid #dcdcdc;box-shadow:1px 1px 10px #dcdcdc;}
	.mian .right ul{margin:0;padding: 0;}
	.mian .right ul li{list-style: none;width:400px;margin-top: 10px;margin-left: auto;margin-right: auto;text-align: center;}
	.mian .right ul li h1{font-size: 22px;text-align: center;border-left:2px solid blue;padding:0;margin-left: 3px;}
	.mian .right ul li .tl{width:150px;height:25px;margin-right:20px;float: left;text-align: right;margin-top: 10px;}
	.mian .right ul li .tr{width:230px;float: left;text-align: left;margin-top: 10px;}
	.mian .right ul li .tr input,select{height:25px;}
	.mian .right ul li .tr p{height:25px;float: left;font-size: 15px;color:#696969;}
	.mian .right ul li #commit{width:360px;height:40px;background:#40E0D0;border-radius:15px;border:none;font-size: 18px; color:white;}
	footer{width: 100%;height:80px;background-color: black;text-align: center;color:white;padding-top:30px;}
	@media (max-width: 1077px){
	.mian .left{width:40%;display: block;float:left;padding: 0;margin:0;}
	}
	</style>
</head>
<body>
	<header>
		<div class="icon">我是ICON</div>
		<ul>
			<li><a href="">导航链接一</a></li>
			<li><a href="">导航链接二</a></li>
			<li><a href="">导航链接三</a></li>
			<li><a href="">导航链接四</a></li>
		</ul>
	</header>
	<div class="mian">
		<div class="left">
			<div class="box">
				<p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p>
			</div>
			<div class="box">
				<p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p>
			</div>
			<div class="box">
				<div class="img">
					<img src="1.jpg">
				</div>
				<div class="img">
					<img src="1.jpg">
				</div>
				<div class="img">
					<img src="1.jpg">
				</div>
				<div class="img">
					<img src="1.jpg">
				</div>
				<div class="img">
					<img src="1.jpg">
				</div>
				<div class="img">
					<img src="1.jpg">
				</div>
				<div class="img">
					<img src="1.jpg">
				</div>
				<div class="img">
					<img src="1.jpg">
				</div>
				<div class="img">
					<img src="1.jpg">
				</div>
				<div class="img">
					<img src="1.jpg">
				</div>
			</div>
		</div>
		<div class="right">
			<ul>
				<li><h1>这里以后是一个侧栏，这是侧栏的标题</h1></li>
				<li><div class="tl">请输入邮箱地址</div><div class="tr"><input type="text" placeholder="这是一个文本输入框"/></div></li>
				<li><div class="tl"></div><div class="tr"><p>邮箱地址请按要求格式输入</p></div></li>
				<li><div class="tl">请输入密码</div><div class="tr"><input type="password"/></div></li>
				<li><div class="tl">请重复输入密码</div><div class="tr"><input type="password"/></div></li>
				<li><div class="tl"></div><div class="tr"><p>密码请为6-16位英文数字</p></div></li>
				<li><div class="tl">性别</div><div class="tr">男<input type="radio" checked="checked" />女<input type="radio" /></div></li>
				<li><div class="tl">城市</div><select>
					<option value="value1" selected>城市 1</option> 
  					<option value="value2">城市 2</option>
  					<option value="value3">城市 3</option>
				</select></li>
				<li><div class="tl">爱好</div><div class="tr">运动<input type="checkbox"/>艺术<input type="checkbox"/>科学<input type="checkbox"/></div></li>
				<li><div class="tl">个人描述</div><div class="tr"><textarea cols="25" rows="5"></textarea></div></li>
				<li><input id="commit" type="button" value="确认提交" /></li>
			</ul>
		</div>
	</div>

	<footer>
		<p>版权所有©</p>
	</footer>
</body>
</html>